<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加文章</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/dropzone/min/dropzone.min.css" />
	<link rel="stylesheet" href="../plugins/dropzone/min/basic.min.css" />
	<link rel="stylesheet" href="../plugins/wangEditor/wangEditor.min.css" />
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    
    
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
	
	<!--分页组件  -->
		<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
		<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
	<!--分页结束  -->
    
    <script type="text/javascript" src="../js/base_pagination.js"></script>
	<script type="text/javascript" src="../plugins/layer/layer.js"></script>
    
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="maiworld" ng-controller="articleController" ng-init="selectId = 31">

	<div class="box box-primary">

	         <!-- Horizontal Form -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">文章内容</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <div class="form-horizontal">
              <div class="box-body">
              
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">标题</label>

                  <div class="col-sm-10">
                    <input type="text" class="form-control" ng-model="title" id="title" placeholder="请输入文章标题">
                  	<p style="color:red;">(*必填，请填写)</p>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label"></label>
                  <div class="col-sm-10">
                  	<div style="color:red;font-size:12px;">最多上传1张</div>
                    <div id="dropz" class="dropzone"></div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">缩略图1</label>
                  <div class="col-sm-10">
                    <input type="text" disabled  class="form-control" id="suolue1" placeholder="缩略图路径">
                    <p style="color:red;">(*必填，请选择一张图片)</p>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label"></label>
                  <div class="col-sm-10">
                  	<div style="color:red;font-size:12px;">最多上传1张</div>
                    <div id="dropz2" class="dropzone"></div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">缩略图2</label>
                  <div class="col-sm-10">
                    <input type="text" disabled  class="form-control" id="suolue2" placeholder="缩略图路径">
                    <p style="color:red;">(*必填，请选择一张图片)</p>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label"></label>
                  <div class="col-sm-10">
                  	<div style="color:red;font-size:12px;">最多上传1张</div>
                    <div id="dropz3" class="dropzone"></div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">缩略图3</label>
                  <div class="col-sm-10">
                    <input type="text" disabled  class="form-control" id="suolue3" placeholder="缩略图路径">
                    <p style="color:red;">(*必填，请选择一张图片)</p>
                  </div>
                </div>
				
				
                
				<div class="form-group" >
					<label for="inputPassword3" class="col-sm-2 control-label">文章内容</label>
					<div class="col-sm-10">
						<div id="editor"></div>
						<input type="hidden" id="contentHtml"></input>
						<p style="color:red;">(发布文章时必填，发布视频时选填，建议填写)</p>
					</div>
				</div>
                
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">所属分校</label>
                  <div class="col-sm-10">
                    <select class="form-control" ng-model="selectStatus">
							<option value="0">选择所属分校</option>
							<option ng-repeat="item in schoolList" value="{{item.id}}">{{item.name}}</option>
					</select>
                  </div>
                </div>
                
                
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                <button type="reset" class="btn btn-default " ng-click="resetInput()" style="margin-left:30px;">取消</button>
                <button type="button" ng-click="submitContent()" class="btn btn-info pull-right" style="margin-right:30px;">添加</button>
              </div>
              <!-- /.box-footer -->
            </div>
          </div>
          
	
	<script type="text/javascript" src="../plugins/wangEditor/wangEditor.min.js"></script>
	<script type="text/javascript" src="../plugins/wangEditor/js/plupload/plupload.full.min.js"></script>
    <script type="text/javascript" src="../plugins/wangEditor/js/plupload/i18n/zh_CN.js"></script>
    <script type="text/javascript" src="../plugins/wangEditor/js/qiniu.js"></script>
	<script type="text/javascript" src="../plugins/dropzone/dropzone.js"></script>
	<script type="text/javascript" src="../js/service/articleService.js"></script>
    <script type="text/javascript" src="../js/controller/baseController.js"></script>
    <script type="text/javascript" src="../js/controller/articleController.js"></script>
    <script type="text/javascript" src="../js/service/sealSchoolService.js"></script>
	<script>
    //编辑器
	var E = window.wangEditor;
	var editor = new E('#editor');
	// 允许上传到七牛云存储
	editor.customConfig.qiniu = true;
    editor.customConfig.onchange = function (html) {
        // html 即变化之后的内容
//        console.log(html);
        $('#contentHtml').val(html);
    }
	editor.create();

	
	// 初始化七牛上传
	uploadInit()
	// 初始化七牛上传的方法
	function uploadInit() {
	    // 获取相关 DOM 节点的 ID
	    var btnId = editor.imgMenuId;
	    var containerId = editor.toolbarElemId;
	    var textElemId = editor.textElemId;

	    // 创建上传对象
	    var uploader = Qiniu.uploader({
	        runtimes: 'html5,flash,html4',    //上传模式,依次退化
	        browse_button: btnId,       //上传选择的点选按钮，**必需**
	        uptoken_url: '/article/uptoken.do',
	            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
	         //uptoken : '<Your upload token>',
	            //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
	        // unique_names: true,
	            // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
	        // save_key: true,
	            // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
	        domain: 'http://static.sanfeng.maiworld.net/',
	            //bucket 域名，下载资源时用到，**必需**
	        container: containerId,           //上传区域DOM ID，默认是browser_button的父元素，
	        max_file_size: '100mb',           //最大文件体积限制
	        flash_swf_url: '../js/plupload/Moxie.swf',  //引入flash,相对路径
	        filters: {
	                mime_types: [
	                  //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
	                  { title: "图片文件", extensions: "jpg,gif,png,bmp" }
	                ]
	        },
	        max_retries: 3,                   //上传失败最大重试次数
	        dragdrop: true,                   //开启可拖曳上传
	        drop_element: textElemId,        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
	        chunk_size: '4mb',                //分块上传时，每片的体积
	        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
	        init: {
	            'FilesAdded': function(up, files) {
	                plupload.each(files, function(file) {
	                    // 文件添加进队列后,处理相关的事情
	                    printLog('on FilesAdded');
	                });
	            },
	            'BeforeUpload': function(up, file) {
	                // 每个文件上传前,处理相关的事情
	                printLog('on BeforeUpload');
	            },
	            'UploadProgress': function(up, file) {
	                // 显示进度
	                printLog('进度 ' + file.percent)
	            },
	            'FileUploaded': function(up, file, info) {
	                // 每个文件上传成功后,处理相关的事情
	                // 其中 info 是文件上传成功后，服务端返回的json，形式如
	                // {
	                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
	                //    "key": "gogopher.jpg"
	                //  }
	                printLog(info);
	                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
	                
	                var domain = up.getOption('domain');
	                var res = $.parseJSON(info);
	                var sourceLink = domain + res.key; //获取上传成功后的文件的Url

	                printLog(sourceLink);

	                // 插入图片到editor
	                editor.cmd.do('insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
	            },
	            'Error': function(up, err, errTip) {
	                //上传出错时,处理相关的事情
	                printLog('on Error');
	            },
	            'UploadComplete': function() {
	                //队列文件处理完毕后,处理相关的事情
	                printLog('on UploadComplete');
	            }
	            // Key 函数如果有需要自行配置，无特殊需要请注释
	            //,
	            // 'Key': function(up, file) {
	            //     // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
	            //     // 该配置必须要在 unique_names: false , save_key: false 时才生效
	            //     var key = "";
	            //     // do something with key here
	            //     return key
	            // }
	        }
	        // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
	        // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
	    });
	}

	// 封装 console.log 函数
	function printLog(title, info) {
	    window.console && console.log(title, info);
	}
	
	//dropzone图片上传
	//不可以放在JQ中
	//关闭自动发现
	Dropzone.autoDiscover =false;
	var myDropzone = new Dropzone("#dropz", {
	    url: "/article/upload.do", // 文件提交地址
	    method: "post",  // 也可用put
	    paramName: "dropFile", // 默认为file
	    maxFiles: 1,// 一次性上传的文件数量上限
	    maxFilesize: 5, // 文件大小，单位：MB
	    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
	    addRemoveLinks: true,
	    uploadMultiple: true,
	    parallelUploads: 1,// //最大并行处理量
	    //previewsContainer:"#preview", // 上传图片的预览窗口
	    dictDefaultMessage: '拖动文件至此或者点击上传',
	    dictMaxFilesExceeded: "您最多只能上传3个文件！",
	    dictResponseError: '文件上传失败!',
	    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
	    dictFallbackMessage: "浏览器不受支持",
	    dictFileTooBig: "文件过大上传文件最大支持.",
	    dictRemoveLinks: "删除",
	    dictCancelUpload: "取消",
	    dictRemoveFile:"删除",
	    init: function () {
	        this.on("addedfile", function (file) {
	            // 上传文件时触发的事件
	        });
	        this.on("success", function (file, data) {
	            // 上传成功触发的事件
	            console.log(data.result,'上传图片成功');
	            $('#suolue1').val(data.result[0]);
	        });
	        this.on("error", function (file, data) {
	            // 上传失败触发的事件
	            console.log(data,'上传图片失败')
	        });
	        this.on("removedfile", function (file) {
	            // 删除文件时触发的方法
	        	$('#suolue1').val('');
	        });
	    }
	});
	
	var myDropzone2 = new Dropzone("#dropz2", {
	    url: "/article/upload.do", // 文件提交地址
	    method: "post",  // 也可用put
	    paramName: "dropFile", // 默认为file
	    maxFiles: 1,// 一次性上传的文件数量上限
	    maxFilesize: 5, // 文件大小，单位：MB
	    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
	    addRemoveLinks: true,
	    uploadMultiple: true,
	    parallelUploads: 1,// //最大并行处理量
	    //previewsContainer:"#preview", // 上传图片的预览窗口
	    dictDefaultMessage: '拖动文件至此或者点击上传',
	    dictMaxFilesExceeded: "您最多只能上传3个文件！",
	    dictResponseError: '文件上传失败!',
	    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
	    dictFallbackMessage: "浏览器不受支持",
	    dictFileTooBig: "文件过大上传文件最大支持.",
	    dictRemoveLinks: "删除",
	    dictCancelUpload: "取消",
	    dictRemoveFile:"删除",
	    init: function () {
	        this.on("addedfile", function (file) {
	            // 上传文件时触发的事件
	        });
	        this.on("success", function (file, data) {
	            // 上传成功触发的事件
	            console.log(data.result,'上传图片成功');
	            $('#suolue2').val(data.result[0]);
	        });
	        this.on("error", function (file, data) {
	            // 上传失败触发的事件
	            console.log(data,'上传图片失败')
	        });
	        this.on("removedfile", function (file) {
	            // 删除文件时触发的方法
	        	 $('#suolue2').val('');
	        });
	    }
	});
	
	var myDropzone3 = new Dropzone("#dropz3", {
	    url: "/article/upload.do", // 文件提交地址
	    method: "post",  // 也可用put
	    paramName: "dropFile", // 默认为file
	    maxFiles: 1,// 一次性上传的文件数量上限
	    maxFilesize: 5, // 文件大小，单位：MB
	    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
	    addRemoveLinks: true,
	    uploadMultiple: true,
	    parallelUploads: 1,// //最大并行处理量
	    //previewsContainer:"#preview", // 上传图片的预览窗口
	    dictDefaultMessage: '拖动文件至此或者点击上传',
	    dictMaxFilesExceeded: "您最多只能上传3个文件！",
	    dictResponseError: '文件上传失败!',
	    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
	    dictFallbackMessage: "浏览器不受支持",
	    dictFileTooBig: "文件过大上传文件最大支持.",
	    dictRemoveLinks: "删除",
	    dictCancelUpload: "取消",
	    dictRemoveFile:"删除",
	    init: function () {
	        this.on("addedfile", function (file) {
	            // 上传文件时触发的事件
	        });
	        this.on("success", function (file, data) {
	            // 上传成功触发的事件
	            console.log(data.result,'上传图片成功');
	            $('#suolue3').val(data.result[0]);
	        });
	        this.on("error", function (file, data) {
	            // 上传失败触发的事件
	            console.log(data,'上传图片失败')
	        });
	        this.on("removedfile", function (file) {
	            // 删除文件时触发的方法
	        	$('#suolue3').val('');
	        });
	    }
	});
	</script>

</body>
</html>